@using AntDesign.Charts
@using Title = AntDesign.Charts.Title

<Tabs>
    <TabPane Key="1">
        <Tab>示例1</Tab>
        <ChildContent>
            <ColumnLine Data="@(new[] {uvData, transformData})" Config="config1" />
        </ChildContent>
    </TabPane>

    <TabPane Key="2">
        <Tab>示例2</Tab>
        <ChildContent>
            <ColumnLine Data="@(new[] {uvData2, transformData2})" Config="config2" />
        </ChildContent>
    </TabPane>

    <TabPane Key="3">
        <Tab>示例3</Tab>
        <ChildContent>
            <ColumnLine Data="@(new[] {uvData3, transformData3})" Config="config3" />
        </ChildContent>
    </TabPane>

    <TabPane Key="4">
        <Tab>示例4</Tab>
        <ChildContent>
            <ColumnLine Data="@(new[] {uvData4, transformData4})" Config="config4" />
        </ChildContent>
    </TabPane>
</Tabs>

@code{

    #region 示例1

    readonly object uvData = new object[]
    {
        new {time = "2019-03", value = 350},
        new {time = "2019-04", value = 900},
        new {time = "2019-05", value = 300},
        new {time = "2019-06", value = 450},
        new {time = "2019-07", value = 470}
        };

    readonly object transformData = new object[]
    {
        new {time = "2019-04", count = 600},
        new {time = "2019-05", count = 400},
        new {time = "2019-06", count = 380},
        new {time = "2019-07", count = 220}
        };

    readonly ColumnLineConfig config1 = new ColumnLineConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "柱线混合图"
        },
        Description = new Description
        {
            Visible = true,
            Text = "柱线混合图表"
        },
        XField = "time",
        YField = new[] { "value", "count" }
    };

    #endregion 示例1

    #region 示例2

    readonly object uvData2 = new object[]
    {
        new {time = "2019-03", value = 350},
        new {time = "2019-04", value = 900},
        new {time = "2019-05", value = 300},
        new {time = "2019-06", value = 450},
        new {time = "2019-07", value = 470}
        };

    readonly object transformData2 = new object[]
    {
        new {time = "2019-03", count = 800},
        new {time = "2019-04", count = 600},
        new {time = "2019-05", count = 400},
        new {time = "2019-06", count = 380},
        new {time = "2019-07", count = 220}
        };

    readonly ColumnLineConfig config2 = new ColumnLineConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "柱线混合图"
        },
        Description = new Description
        {
            Visible = true,
            Text = "自定义图形细节"
        },
        XField = "time",
        YField = new[] { "value", "count" },
        ColumnConfig = new ColumnConfig
        {
            Color = "#586bce"
        },
        LineConfig = new LineConfig
        {
            Color = "#29cae4",
            Point = new LineViewConfigPoint
            {
                Visible = true,
            },
            Label = new Label
            {
                Visible = true,
            }
        }

    };

    #endregion 示例2

    #region 示例3

    readonly object uvData3 = new object[]
    {
        new {time = "2019-03", value = 350},
        new {time = "2019-04", value = 900},
        new {time = "2019-05", value = 300},
        new {time = "2019-06", value = 450},
        new {time = "2019-07", value = 470}
        };

    readonly object transformData3 = new object[]
    {
        new {time = "2019-03", count = 800},
        new {time = "2019-04", count = 600},
        new {time = "2019-05", count = 400},
        new {time = "2019-06", count = 380},
        new {time = "2019-07", count = 220}
        };

    readonly ColumnLineConfig config3 = new ColumnLineConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "柱线混合图"
        },
        Description = new Description
        {
            Visible = true,
            Text = "关闭双Y轴颜色映射"
        },
        XField = "time",
        YField = new[] { "value", "count" },
        YAxis = new ComboYAxis
        {
            LeftConfig = new ComboYAxisConfig
            {
                ColorMapping = false,
            },
            RightConfig = new ComboYAxisConfig
            {
                ColorMapping = false,
            }
        }

    };

    #endregion 示例3

    #region 示例4

    readonly object uvData4 = new object[]
{
        new {time = "2019-03", value = 350},
        new {time = "2019-04", value = 900},
        new {time = "2019-05", value = 300},
        new {time = "2019-06", value = 450},
        new {time = "2019-07", value = 470}
    };

    readonly object transformData4 = new object[]
    {
          new { time =  "2019-03", count =  800, name =  "a" },
          new { time =  "2019-04", count =  600, name =  "a" },
          new { time =  "2019-05", count =  400, name =  "a" },
          new { time =  "2019-06", count =  380, name =  "a" },
          new { time =  "2019-07", count =  220, name =  "a" },
          new { time =  "2019-03", count =  750, name =  "b" },
          new { time =  "2019-04", count =  650, name =  "b" },
          new { time =  "2019-05", count =  450, name =  "b" },
          new { time =  "2019-06", count =  400, name =  "b" },
          new { time =  "2019-07", count =  320, name =  "b" },
          new { time =  "2019-03", count =  900, name =  "c" },
          new { time =  "2019-04", count =  600, name =  "c" },
          new { time =  "2019-05", count =  450, name =  "c" },
          new { time =  "2019-06", count =  300, name =  "c" },
          new { time =  "2019-07", count =  200, name =  "c" },
        };

    readonly ColumnLineConfig config4 = new ColumnLineConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "柱线混合图",
            AlignTo = "middle"
        },
        Description = new Description
        {
            Visible = true,
            Text = "配置多折线",
            AlignTo = "middle"
        },
        XField = "time",
        YField = new[] { "value", "count" },
        ColumnConfig = new ColumnConfig
        {
            Color = "#586bce"
        },
        LineSeriesField = "name"

    };

    #endregion 示例4

}